import { AuditOutlined, FileTextOutlined, ClockCircleOutlined } from '@ant-design/icons'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, HddOutlined, LoadingOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons'
import {Card, Drawer, Table, Tag, message, Modal, Form, Select, Input, TreeSelect, Button} from 'antd'
import React, { useState, useEffect } from 'react'
import '../../../DepartmentManage/views/style.css'
import RegisterAppoval from './RegisterAppoval'
import { useRequest } from '@umijs/hooks'
import { fetchRequest } from '../../../../utils/Request'
import { url } from '../../../../utils/url'
import { useDispatch, useSelector } from 'react-redux'
import actionTypes from '../../actionTypes'
import { getOriginString } from '../../../../utils/encrypt'
import moment from 'moment'
import EntranceApproval from "./EntranceAppovalingTable";


const tabList = [
  {
    key: '2',
    tab: '待审核',
  },
  {
    key: '3',
    tab: '审核不通过',
  },
  {
    key: '1',
    tab: '已完成',
  }
  // , {
  //     key: "0",
  //     tab: "已失效"
  // }
];

interface RequestParams {
  studentName:string,
  state: number,
  page: number,//从0开始
  size: number
}

interface Operation {
  visible: boolean,
  content: any
}

interface DenyInfo {
  visible: boolean,
  content: any
}

export default function RegisterAppovalingTable() {
  const columns = [{
    title: "姓名",
    dataIndex: "studentName",
    key: 'studentName'
  }, {
    title: "编号",
    dataIndex: "studentId",
    key: 'studentId'
  },
    {
      title: "组织机构",
      dataIndex: "deptName",
      key: 'deptName'
    }, {
      title: "操作",
      render: (record: any) => {
        return <span>
                <Tag className="tags-hover"
                     color="#108ee9" icon={record.state === 2 ?
                    <AuditOutlined /> : <FileTextOutlined />}
                     onClick={() => setApproval({ visible: true, content: record })}>
                    {record.state === 2 ? '审核' : '查看'}</Tag></span>
      }
    }]
  const [form] = Form.useForm()
//查询框
  const searchForm = (<Card className="search-form"> <Form form={form} layout="inline" initialValues={{ healthState: -1 }} onFinish={handleFinish} onReset={handleReset}>

    <Form.Item className="form-control-item" name="userName" label="姓名">
      <Input className="search-form-item" />
    </Form.Item>

    <Form.Item className="form-control-item"  >
      <Button key="1" type="primary" icon={<SearchOutlined />} htmlType="submit" style={{ marginRight: '8px' }}>搜索</Button>
      <Button key="2" icon={<SyncOutlined />} htmlType="reset">重置</Button>

    </Form.Item>

  </Form></Card>)

  const [approval, setApproval] = useState<Operation>({ visible: false, content: null })

  const [params, setParams] = useState<RequestParams>({ studentName:"",state: 2, page: 1, size: 10 })


  const [denyInfo, setdenyInfo] = useState<DenyInfo>({ visible: false, content: null })

  const [denyHelp, setdenyHelp] = useState<undefined | string>(undefined)

  //当翻页变化的时候
  function onPageChange(page: number) {
    setParams({ ...params, page: page  })
  }

  //点击搜索按钮
  function handleFinish(values: any) {
    setParams({ ...params, studentName: values.userName})
  }

  function handleReset() {
    setParams({
      studentName:"",state: 2, page: 1, size: 10
    })

  }
  const disptatch = useDispatch()

  const tableData = useSelector((state: any) => {


    return state.entranceManage.registertableData

  })
  // console.log("table数据")
  // console.log(tableData)

  //请求函数
  async function getTableData(params: RequestParams) {
    // console.log(params)
    try {
      const json = await fetchRequest(url.GET_REGISTER_TABLE, params)
      console.log("获取数据")
      console.log(json.data.size)
      if (json.success) {
        disptatch({ type: actionTypes.GET_REGISTER_CHECK_TABLE,
          payload: { data: json.data.rows, count: json.size,total: json.data.total} })
      } else {
        message.destroy();
        message.error(json.error);
        disptatch({ type: actionTypes.GET_REGISTER_CHECK_TABLE, payload: { data: [], count: 0 } })
      }
    } catch (error:any) {
      message.destroy();
      message.error(error.message);
      disptatch({ type: actionTypes.GET_REGISTER_CHECK_TABLE, payload: { data: [], count: 0 } })
    }
  }

  //请求
  const getData = useRequest(getTableData, {
    manual: true,
    loadingDelay: 200
  });

  //监听CARD参数、num、index变化变化就重新请求数据
  useEffect(() => {
    getData.run(params)
  }, [params])


  function onApproval() {
    setApproval({ ...approval, visible: false })
    // setParams({...params})
    if (tableData.count > params.size && tableData.count - 1 === (params.page+1) * 10) {
      setParams({ ...params, page: params.page })
    } else {
      getData.run(params)
    }
  }


  return (
      <div>
        {searchForm}
        <Card style={{ margin: '20px'}}
              headStyle={{ marginBottom: '24px' }}
              bordered={false}
              tabList={tabList}
              activeTabKey={params.state.toString()}
              onTabChange={key => {
                setParams({ studentName:"",page: 1, size: 10, state: parseInt(key) })
              }}
        >
          <Table
              rowKey={record => record.userId}
              loading={getData.loading}
              pagination={{ hideOnSinglePage: true, pageSize: params.size,
                total: tableData.total,
                onChange: onPageChange,
                showSizeChanger: false, simple: true, current: params.page  }}
              columns={columns}
              dataSource={tableData.data}
              // dataSource={tabledshData}
          />
          <Drawer destroyOnClose width="70%" visible={approval.visible} onClose={() => setApproval({ ...approval, visible: false })} >
            <RegisterAppoval content={approval.content} onApproval={onApproval} />
          </Drawer>

        </Card>
      </div>

  )

}
